<%@ page language="java" contentType="text/html; charset=UTF-8"
                            pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/main.css">
    <link rel="stylesheet" href="${APP_PATH }/jquery/pagination/pagination.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 流程管理</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <%@ include file="/WEB-INF/jsp/common/top.jsp" %>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" id="queryText" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning" id="queryBtn"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>

                    <button type="button" class="btn btn-primary" style="float:right;" id="processDifFileBtn" ><i class="glyphicon glyphicon-upload"></i> 上传流程定义文件</button>
                    <form method="post" enctype="multipart/form-data" id="processDifForm">
                        <input type="file" style="display: none" name="processDifFile" id="processDifFile">
                    </form>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th>流程名称</th>
                                <th>流程版本</th>
                                <th>kEY</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <%--<tr>
                                <td>1</td>
                                <td>实名认证审批流程</td>
                                <td>2</td>
                                <td>人工审核</td>
                                <td>张三</td>
                                <td>
                                    <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-eye-open"></i></button>
                                    <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                                </td>
                            </tr>--%>

                            </tbody>
                            <tfoot>
                            <tr >
                                <td colspan="6" align="center">
                                    <ul class="pagination" id="Pagination">
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script src="${APP_PATH }/jquery/layer/layer.js"></script>
<script src="${APP_PATH }/script/menu.js"></script>
<script src="${APP_PATH }/jquery/pagination/jquery.pagination.js"></script>
<script src="${APP_PATH }/jquery/jquery-form/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showMenu();
        queryProcessPage(0);
    });
    var jsonObj={"pageno":1};
    function queryProcessPage(pageno){
        var loadingIndex=-1;
        jsonObj.pageno=pageno+1;
        $.ajax({
            url:"${APP_PATH}/process/doIndex.do",
            type:"post",
            data:jsonObj,
            beforeSend:function () {
                loadingIndex = layer.msg('查询中', {icon: 16});
                return true;
            },
            success:function(result){
                layer.close(loadingIndex);
                if(result.success){
                    var page=result.page;
                    var data=page.data;
                    var content='';
                    $.each(data,function(i,n){
                        content+='<tr>';
                        content+='	<td>'+(i+1)+'</td>';
                        content+='	<td>'+n.name+'</td>';
                        content+='	<td>'+n.version+'</td>';
                        content+='	<td>'+n.key+'</td>';
                        content+='	<td>';
                        content+='		<button type="button" onclick="window.location.href=\'${APP_PATH}/process/showimg.do?id='+n.id+'\'" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-eye-open"></i></button>';
                        content+='		<button type="button" onclick="deleteProcessDef(\''+n.id+'\',\''+n.name+'\')" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
                        content+='	</td>';
                        content+='</tr>';
                    })
                    $("tbody").html(content);

                    var num_entries = page.totalsize;
                    // 创建分页
                    $("#Pagination").pagination(num_entries, {
                        num_edge_entries: 2, //边缘页数
                        num_display_entries: 3, //主体页数
                        callback: queryProcessPage,
                        items_per_page:page.pagesize, //每页显示1项
                        current_page:page.pageno-1,
                        prev_text:"上一页",
                        next_text:"下一页"
                    });

                }else{
                    layer.msg(result.message, {time:1000, icon:5, shift:6});
                }

            },
            error:function () {
                layer.msg("查询失败！", {time:1000, icon:5, shift:6});
            }

        });
    }
    $("#queryBtn").click(function(){
        var queryText=$("#queryText").val();
        jsonObj.queryText = queryText;
        queryProcessPage(0);
    });
    $("#processDifFileBtn").click(function () {
        $("#processDifFile").click();
    });
    $("#processDifFile").change(function () {
        var options={
            url:"${APP_PATH}/process/deploy.do",
            beforeSubmit:function(){
                loadIndex=layer.msg('流程定义部署中',{icon:6});
                return true;
            },
            success:function (result) {
                layer.close(loadIndex);
                if(result.success){
                    layer.msg("流程部署成功！",{time:1000,icon:6});
                    queryProcessPage(0);
                }else{
                    layer.msg(result.message,{time:1000,icon:5,shift:6})
                }
            }
        }
        $("#processDifForm").ajaxSubmit(options);
        return false;
    });
    function deleteProcessDef(id,name){
        layer.confirm("确定要删除【"+name+"】流程吗？",  {icon: 3, title:'提示'}, function(cindex){
            layer.close(cindex);
            $.ajax({
                url:"${APP_PATH}/process/delete.do",
                type:"post",
                data: {
                    "id":id
                },
                beforeSend:function(){
                    return true;
                },
                success:function(result){
                    if(result.success){
                        queryProcessPage(0);
                    }else{
                        layer.msg(result.message, {time:1000, icon:5, shift:6});
                    }
                },
                error:function(result){
                    layer.msg(result.message, {time:1000, icon:5, shift:6});
                }
            })
        }, function(cindex){
            layer.close(cindex);
        });

    }

</script>
</body>
</html>

